<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>过渡</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				width: 300px;
				height: 300px;
				background-color: lightskyblue;
				/* 过渡:teansition:过渡的属性 过渡时间 速度
				   ease:默认值 慢-快-慢
				   linear:匀速
				   ease-in:低速开始
				   ease-out:低速结束
				   ease-in-out:低速开始和结束 */
				/* transition: width 2s linear 1s; */
				/* all:所有的 */
				transition: all 3s linear;
				
			}
			/* 鼠标悬停 */
			.box:hover{
			/* 	width: 800px;
				height: 500px; */
				background-color: pink;
				/* transform:转换:
				    1.位移:
					  translate(x轴方向,y轴方向) 
					  trabslatex(x轴方向)
					  translatey(y轴方向)
					  位移的值可以是百分比，对应自身宽高的百分比。
					2.缩放scale():倍数
					
					3.斜切skew(deg):倾斜
					
					4.旋转rotate(deg):
					
					  */
				/* transform: translateY(-100px); */
				/* transform: scale(.5); */
				/* transform: skew(45deg); */
				/* transform: rotatex(90deg); */
				/* 复合写法: */
				transform: translate(-100px) scale(2) rotate(45deg);
				/* transform-origin: 改变元素变换的中心点 */
				transform-origin: center;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>
